<script setup>
import { reactive, toRefs, ref, computed, onMounted } from 'vue';
import { ElMessage, ElTable, ElTableColumn } from 'element-plus';
import { delSystemDept, getSystemDeptAll, postSystemDept, putSystemDept } from '@/apis/api-system.js';
import { OPERATION_TYPE } from '@/common/common-const';
import ReleasePromptMessage from '@/components/ReleasePromptMessage.vue';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useSystemStore } from '@/stores';
import ReleaseDeptOperation from './ReleaseDeptOperation.vue';

const props = defineProps({
  name: {
    type: String,
  },
});
const { name } = toRefs(props);

const titleName = computed(() => name.value);
const systemStore = useSystemStore();

const tableData = ref([]);
const deptShow = ref(false);
const deptType = ref('');
const deptData = ref({});

const messageInfo = reactive({
  messageBoxShow: false,
  messageText: '',
  messageBoxType: '',
});

const handleDeptShowEmit = () => {
  deptShow.value = false;
  deptType.value = '';
  deptData.value = {};
};

// 操作
const handleOperation = (type, item) => {
  deptType.value = type;

  if (type == OPERATION_TYPE.DELETE) {
    messageInfo.infoBoxValue = item;
    messageInfo.messageBoxType = '删除';
    messageInfo.messageBoxShow = true;
    messageInfo.messageText = '该数据删除后不可恢复，确定要删除吗？';
  }

  if (type == OPERATION_TYPE.EDIT || type == OPERATION_TYPE.LOOK) {
    deptShow.value = true;
    deptData.value = item;
  }

  if (type == OPERATION_TYPE.ADD) {
    deptShow.value = true;
  }
};

const handleMessageBox = (val) => {
  messageInfo.messageBoxShow = false;
  messageInfo.messageText = '';

  if (val) {
    //  删除接口
    delSystemDeptApi(messageInfo.infoBoxValue.id);
  }

  messageInfo.messageBoxType = '';
};

// 数据
const handleDeptParamEmit = (value, type) => {
  if (type == 'ADD') {
    postSystemDeptApi(value);
  } else {
    putSystemDeptApi(value);
  }
};

onMounted(() => {
  getSystemDeptAllApi();
});

/*
 *@description: 获取部门列表
 *@author:chen_fei
 *@Date: 2024-06-17 09:42:32
 */
const getSystemDeptAllApi = async () => {
  const [err, data] = await getSystemDeptAll();

  if (!err) {
    tableData.value = data.data;
    systemStore.STORE_SYSTEM_DEPT(data.data);
  }
};

/*
 *@description: 新增部门数据
 *@author:chen_fei
 *@Date: 2024-06-17 09:42:47
 */
const postSystemDeptApi = async (value) => {
  const [err] = await postSystemDept(value);

  if (!err) {
    ElMessage.success('创建成功');
  }

  handleDeptShowEmit();
  getSystemDeptAllApi();
};

/*
 *@description: 编辑组织数据
 *@author:chen_fei
 *@Date: 2024-06-17 09:42:55
 */
const putSystemDeptApi = async (value) => {
  const [err] = await putSystemDept(value, value.id);

  if (!err) {
    ElMessage.success('编辑成功');
  }

  handleDeptShowEmit();
  getSystemDeptAllApi();
};

/*
 *@description: 删除组织数据
 *@author:chen_fei
 *@Date: 2024-06-17 09:43:07
 */
const delSystemDeptApi = async (id) => {
  const [err] = await delSystemDept(id);

  if (!err) {
    ElMessage.success('删除成功!');
  }

  messageInfo.infoBoxValue = '';

  getSystemDeptAllApi();
};
</script>
<template>
  <div class="root h-100% w-100% rounded-5px p-1.5rem">
    <h3>{{ titleName }}</h3>
    <div class="flex-x-end cursor-pointer">
      <div class="btn-add flex-center" @click="handleOperation('ADD')">
        <SvgIconIndex icon-class="add" size="20px" class="cursor-pointer" />新建
      </div>
    </div>
    <div class="mt-20px">
      <ElTable
        :data="tableData"
        style="width: 100%"
        border
        row-key="id"
        :header-cell-style="{
          color: '#333333',
          background: 'rgba(97, 186, 55, 0.06)',
        }"
      >
        <ElTableColumn type="index" label="序号" align="center" width="85" />
        <ElTableColumn prop="name" label="组织名称" align="center" show-overflow-tooltip />
        <ElTableColumn prop="regionCode" label="组织区域代码" align="center" show-overflow-tooltip />
        <ElTableColumn prop="remark" label="备注" align="center" show-overflow-tooltip />
        <ElTableColumn prop="createdDate" label="创建时间" align="center" show-overflow-tooltip />
        <ElTableColumn label="操作" align="center" width="240">
          <template #default="scope">
            <div class="flex items-center justify-around">
              <div
                class="edit_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('EDIT', scope.row)"
              >
                编辑
              </div>
              <div
                class="look_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('LOOK', scope.row)"
              >
                新增
              </div>
              <div
                class="del_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('DELETE', scope.row)"
              >
                删除
              </div>
            </div>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
  </div>

  <!-- 提示 -->
  <ReleasePromptMessage
    v-if="messageInfo.messageBoxShow"
    :message-box-show="messageInfo.messageBoxShow"
    :message-text="messageInfo.messageText"
    :message-box-type="messageInfo.messageBoxType"
    @handle-message-box="handleMessageBox"
  />

  <ReleaseDeptOperation
    v-if="deptShow"
    :dept-data="deptData"
    :dept-type="deptType"
    :dept-show="deptShow"
    @handle-dept-show-emit="handleDeptShowEmit"
    @handle-dept-param-emit="handleDeptParamEmit"
  />
</template>

<style scoped lang="scss">
.root {
  font-size: $base-system-font-size-base;
  background-color: $base-background-white;

  .btn-add {
    width: 100px;
    height: 40px;
    color: $base-button-color-white;
    background-color: $base-button-color-green;
    border-radius: 5px;
  }
  .edit_btn,
  .look_btn,
  .del_btn {
    font-size: $base-system-font-size-base;
    border-radius: 5px;
  }
  .edit_btn {
    color: $base-button-color-blue;
    background-color: $base-button-background-blue;
  }
  .look_btn {
    color: $base-button-color-green;
    background-color: $base-button-background-green;
  }
  .del_btn {
    color: $base-button-color-red;
    background-color: $base-button-background-red;
  }
}
</style>
